<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="react.development.js"></script>
    <script src="react-dom.development.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
        
        class SearchBar extends React.Component {
            render(){
                <div>
                    <input type="text" placeholder="Search..."/>
                    <br/>
                    <label>
                        <input type="checkbox" value="on" />
                        Only show products in stock
                    </label>
                </div>
            }
        }

        class ProductCategoryRow extends React.Component {
            render(){
                <div>
                   { this.props.category }
                </div>
            } 
        }

        class ProductRow extends React.Component {
            render(){
                <div>
                    <td>{ this.props.name } </td>
                    <td>{ this.props.price }</td>
                </div>
            }  
        } 

        class ProductRow extends React.Component {
            render(){
                <div>
                    <input type="text" placeholder="Search..."/>
                    <br/>
                    <label>
                        <input type="checkbox" value="on" />
                        Only show products in stock
                    </label>
                </div>
            }
        } 

       
        class ProductTable extends React.Component{
            render(){
                return (
                    <table>
                        <th>
                            <ProductCategoryRow />
                        </th>
                        <ProductRow />
                    </table>
                ) 
            }
        }

        class FilterableProductTable extends React.Component {

            constructor(props){
                
            }

            render() {
                return (
                    <div>
                        <SearchBar />
                        <ProductTable />
                    </div>
                )
            }
       }
       
       
        var PRODUCTS = [
            {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
            {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
            {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
            {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
            {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
            {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
        ];

        ReactDOM.render(
            <FilterableProductTable products={PRODUCTS} />,
            document.getElementById('root')
        ); 

   </script>
  </body>
</html>